<template>
  <!-- v-model="formData.netArea" -->
  <ga-radio-group class="radio_group" v-model="arch">
    <ga-radio v-for="(item, idx) in dataList" :key="item?.id" :value="item?.id">
      <template #radio="{ checked }">
        <ga-tag
          @click="idx !== checkedNet ? handleChangeRadio(idx) : null"
          class="custom_radio"
          :checked="idx === checkedNet"
          checkable
        >
          <systemIcon :icon="item?.osType" v-if="item?.osType" />
          {{ item?.name || item?.osType }}
          <cusBadge :isXc="item?.xc" />
        </ga-tag>
      </template>
    </ga-radio>
  </ga-radio-group>
</template>

<script setup>
import { ref, defineModel, defineExpose } from "vue";
import systemIcon from "common/systemIcon.vue";
import cusBadge from "./cusBadge.vue";
const arch = defineModel();
const props = defineProps({
  dataList: {
    type: Array,
    default: () => [],
  },
});
const checkedNet = ref(0);
const emits = defineEmits(["handleChangeRadio"]);
const handleChangeRadio = (idx) => {
  checkedNet.value = idx;
  emits("handleChangeRadio");
};
defineExpose({ checkedNet, handleChangeRadio });
</script>

<style lang="scss" scoped>
.radio_group {
  .custom_radio {
    justify-content: center;
    height: 30px;
    min-width: 144px;
    background: #edf0f4;
    margin-bottom: 8px;
  }
  .garco-tag-checked {
    border-color: #0f5ef7;
    color: #0f5ef7;
  }
  .garco-tag-checkable.garco-tag-checked:hover {
    background: #edf0f4;
    border-color: #0f5ef7;
  }
  .garco-radio {
    margin-right: 0;
    padding-left: 0;
    padding-right: 8px;
  }
}
</style>
